<template>
  <div
    class="app-container home"
  >
     <div
       v-hasPermi="['showpictrue']"
     >
    <div ref="myChart" style="width: 100%;height: 270px;margin-top: 50px"></div>
    <div style="margin-top: 30px;display: flex">
    <el-card class="box-card" style="display: inline-block;margin-left: 50px" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>男寝违纪</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="clearNotice">一键清空</el-button>
      </div>
      <div v-for="(item,index)  in errorList" class="text item">
       <span>{{item.studentName}}扣了{{item.editScore}}分</span>
<!--        <div style="display: inline-block;float: right">-->
          <el-button type="text" style="margin-left: 5px" >详细查看></el-button>
          <el-button type="text" icon="el-icon-delete" style="float: right" ></el-button>
<!--        </div>-->
      </div>
    </el-card>

    <el-card v-loading="loading" class="box-card" style="display: inline-block;margin-left: 30px">
      <div slot="header" class="clearfix">
        <span>女寝违纪</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="clearNotice">一键清空</el-button>
      </div>
      <div v-for="(notice1,index) in noticeList" class="text item">
        <span>{{notice1}}</span>
        <el-button type="text" style=" margin-left: 5px" >详细查看></el-button>
        <el-popconfirm
          title="确定删除当前事项吗？"
          @Confirm="deletNotice(index1)"
        >
        <el-button type="text" slot="reference" icon="el-icon-delete" style="float: right" ></el-button>
        </el-popconfirm>
      </div>
    </el-card>
      <div id="pieReport" style="width: 400px;height: 300px;"></div>
    </div>
     </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { listError, getError, delError, addError, updateError } from "@/api/system/error"


export default {
  name: "Index",
  data() {
    return {
      version: "3.8.0",
      noticeList:["208寝室有人装逼","208寝室有人玩dnf","208寝室有人看小电影","208寝室有人喝吐了"],
      charts: "",
      visible:false,
      opinion: ["警告人数", "处分人数"],
      opinionData: [
        { value: 12, name: "警告人数", itemStyle: "#1ab394" },
        { value: 18, name: "处分人数", itemStyle: "#DC143C" }
      ],
      errorList:[],
      total:'',
      loading:false

    };
  },
  mounted() {
    this.drawLine();
    this.$nextTick(function() {
      this.drawPie("pieReport");
    });
    this.getList()

  },
  created() {
  },
  methods: {
    getList() {
      this.loading = true;
      listError().then(response => {
        this.errorList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    deletNotice(index){
      this.noticeList.splice(index1,1);
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    clearNotice(){
      console.log(this.noticeList)
      this.noticeList=[];
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.opinion
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              color: function(params) {
                //自定义颜色
                var colorList = ["#1ab394", "#79d2c0"];
                return colorList[params.dataIndex];
              }
            },
            data: this.opinionData
          }
        ]
      });
    },

    drawLine() {
      // 初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 配置参数
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          // data: ["抽烟", "喝酒", "其他违纪", "直接访问", "搜索引擎"]
          data: ["抽烟", "喝酒", "看小电影"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "抽烟",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "喝酒",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "看小电影",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          // {
          //   name: "直接访问",
          //   type: "line",
          //   stack: "总量",
          //   areaStyle: { normal: {} },
          //   data: [320, 332, 301, 334, 390, 330, 320]
          // // },
          // {
          //   name: "搜索引擎",
          //   type: "line",
          //   stack: "总量",
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "top"
          //     }
          //   },
          //   areaStyle: { normal: {} },
          //   data: [820, 932, 901, 934, 1290, 1330, 1320]
          // }
        ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
}
</style>

